<template>
	<view class="flex-column page">
		<custom-navigation title="商品分类" :rightImg="!isDrag?'/static/add.png':null" :rightTxt="isDrag?'保存':null"
			@rightAction="saveSort"></custom-navigation>

		<scroll-view :scroll-y="true" class="list">
			<HM-dragSorts-type :isMultiple="isMultiple" :selectMode="selectMode" :list="list" :isDrag="isDrag"
				:allParentsNoObj="allParentsNoObj.all" :autoScroll="true" :feedbackGenerator="true" :longTouch="isDrag"
				:listHeight="listHeight" :rowHeight="100" @change="change" @confirm="confirm" @onclick="onclick">
			</HM-dragSorts-type>
		</scroll-view>
		<view class="bottom flex-row-center" v-if="isMultiple" @click="multipleSelect">
			<view class="text">已选{{getAllNum()}}</view>
			<view class="btn2">确认选择</view>
		</view>

		<view class="bottom flex-column-center" v-else-if="!isDrag" @click="isDrag=true">
			<view class="btn">排序</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				classifycations: [],
				listHeight: 100,
				list: [],
				isDrag: false,
				selectMode: false,
				isMultiple: false,
				moveList: [],
				selectNo: 0,
				allParentsNoObj: {
					all: []
				},
				count: 0,
				paramsList: []
			}
		},
		onLoad(options) {
			this.selectMode = options.selectMode ?? false
			this.isMultiple = options.isMultiple ?? false
			this.selectNo = options.selectNo ?? 0
		},
		onShow() {
			this.getClassifycations();
		},
		methods: {
			getAllParentsNo(data, no) {
				let res = {
					no: no,
					parent_no: '',
					brother_no: [],
					son_no: [],
					all: []
				};
				if (data && no) {
					let obj = {}
					let parent_obj = {}
					data.forEach(item => {
						if (item && item.no) {
							obj[item.no] = item
						}
						if (item && item.parent_no) {
							if (!parent_obj[item.parent_no]) {
								parent_obj[item.parent_no] = [];
							}
							parent_obj[item.parent_no].push(item.no)
						}
					});

					res.parent_no = obj[no] ? obj[no].parent_no : '';
					res.son_no = parent_obj[no] ? parent_obj[no] : [];
					if (res.parent_no) {
						res.brother_no = parent_obj[res.parent_no] ? parent_obj[res.parent_no] : [];
					}
					res.all = [no, res.parent_no, ...res.son_no, ...res.brother_no];
				}
				return res;
			},
			getAllNum() {
				console.log("getAllNum");
				let count = 0;
				for (let i in this.moveList) {
					if (this.moveList[i].check) {
						count++
					}
				}
				return count;
			},
			multipleSelect() {
				let list = [];
				for (let i in this.moveList) {
					if (this.moveList[i].check) {
						list.push(this.moveList[i])
					}
				}
				uni.setStorageSync("multipleSelectClassify", list)
				uni.navigateBack()
			},
			saveSort() {
				if (this.isDrag == false) {
					uni.navigateTo({
						url: '/pages/goods/baseinfo/add_goods_classfiy'
					})
				} else {
					this.isDrag = false;
					
					this.count=0;
					this.paramsList=[];
					this.getParams(this.moveList);
					 if(this.paramsList.length==0)return;
					 
					uni.showLoading({
						title: "加载中..."
					})
					// for (let i in this.moveList) {
					// 	if (this.moveList[i].children != null && this.moveList[i].children.length > 0) {
					// 		for (let j in this.moveList[i].children) {
					// 			params.push({
					// 				"serviceName": "srvretail_goods_classify_update",
					// 				"condition": [{
					// 					"colName": "id",
					// 					"ruleType": "eq",
					// 					"value": this.moveList[i].children[j].id
					// 				}],
					// 				"data": [{
					// 					"serial_no": count,
					// 					"parent_no": this.moveList[i].no
					// 				}]
					// 			})
					// 			count++
					// 		}
					// 	} else {
					// 		params.push({
					// 			"serviceName": "srvretail_goods_classify_update",
					// 			"condition": [{
					// 				"colName": "id",
					// 				"ruleType": "eq",
					// 				"value": this.moveList[i].id
					// 			}],
					// 			"data": [{
					// 				"serial_no": count
					// 			}]
					// 		})
					// 		count++
					// 	}
					// }
					this.$apiPost("/retail/operate/srvretail_goods_classify_update", this.paramsList).then(res => {
						uni.hideLoading()
						if (res.state == 'SUCCESS') {
							uni.showToast({
								title: "修改成功！",
								mask: true
							})
							this.getClassifycations()
						}
					})
				}
			},
			getParams(list) {
				for (let i in list) {
					var item = list[i];
					var children = item.children;
					if (children != null && !item.expand) { //没有展开
						this.getParams(children)
					}
					this.paramsList.push({
						"serviceName": "srvretail_goods_classify_update",
						"condition": [{
							"colName": "id",
							"ruleType": "eq",
							"value": item.id
						}],
						"data": [{
							"serial_no": this.count
						}]
					}) 
					this.count++
				}
			},
			getClassifycations() {
				this.$apiPost("/retail/select/srvretail_goods_classify_select", {
					serviceName: "srvretail_goods_classify_select",
					"colNames": ["*"]
				}).then(res => {
					this.newList = [];
					this.allParentsNoObj = this.getAllParentsNo(res.data, this.selectNo);
					for (let i in res.data) {
						let item = res.data[i];
						if (item.parent_no == null) { //顶级菜单
							let children = this.getCcChildren(res.data, item.no, 0);
							item.serial_no = i //保证序列号是从上到下
							item.children = children //用来恢复折叠
							item.expand = true
							item.level = 0
							this.newList.push(item)
							this.newList.push(...children)
						}
					}

					this.classifycations = this.newList;
					this.list = this.newList;

					this.listHeight = this.list.length * 120;
				})
			},

			getCcChildren(classifycations, parent_no, level) {
				var list = [];
				level++
				for (var i in classifycations) {
					let item = classifycations[i];

					if (item.parent_no == parent_no) {


						item.serial_no = i //保证序列号是从上到下
						let children = this.getCcChildren(classifycations, item.no, level);
						item.serial_no = i //保证序列号是从上到下
						if (children != null && children.length != 0)
							item.children = children //用来恢复折叠
					 item.expand = true
						item.level = level
						list.push(item)
						if (children != null && children.length != 0)
							list.push(...children)


						// list.push(item)
					}
				}
				return list;
			},
			onclick(e) {
				console.log('=== onclick start ===');
				console.log("被点击行: " + JSON.stringify(e.value));
				console.log("被点击下标: " + JSON.stringify(e.index));
				console.log('=== onclick end ===');

				if (this.selectMode) {
					var pages = getCurrentPages(); // 获取页面栈
					var currPage = pages[pages.length - 1]; // 当前页面
					var prevPage = pages[pages.length - 2]; // 上一个页面
					prevPage.goods_classify = this.list[e.index]
					uni.navigateBack()
					return
				}

				let parentData = null;
				//修改
				let item = this.list[e.index]
				if (item.is_topping == "是") {
					return;
				}
				for (let i in this.list) {
					if (item.parent_no == this.list[i].no) {
						parentData = JSON.stringify({
							classify_name: this.list[i].classify_name,
							no: this.list[i].no,
							parent_no: this.list[i].parent_no
						})

					}
				}
				uni.navigateTo({
					url: `/pages/goods/baseinfo/add_goods_classfiy?isEdit=true&isParent=false&parentData=${parentData}&name=${item.classify_name}&currentNo=${item.no}&id=${item.id}`
				})
			},
			change(e) {
				// console.log('=== change start ===');
				// console.log("被拖动行: " + JSON.stringify(e.moveRow));
				// console.log('原始下标：', e.index);
				// console.log('移动到：', e.moveTo);
				// console.log('=== change end ===');
			},
			confirm(e) {
				console.log('=== confirm start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				console.log('=== confirm end ===');
				console.log('list', this.list);
				this.moveList = e.list
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		height: 100vh;
		width: 100%;
	}

	.list {
		flex: 1;
		height: 500rpx;
	}

	.bottom {
		width: 100%;
		height: 146rpx;
		justify-content: center;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 -32rpx 32rpx 3rpx rgba(245, 245, 247, 1);
		z-index: 1;

		.text {
			flex: 1;
			font-size: 32rpx;
			font-weight: 700;
			margin-left: 24rpx;
			color: rgba(51, 51, 51, 1);
		}

		.btn2 {
			width: 320rpx;
			height: 80rpx;
			opacity: 1;
			margin-right: 100rpx;
			border-radius: 40px;
			background: rgba(56, 192, 158, 1);
			font-size: 32rpx;
			font-weight: 700;
			line-height: 80rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
		}

		.btn {
			width: 320rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 40px;
			background: rgba(56, 192, 158, 1);
			font-size: 32rpx;
			font-weight: 700;
			line-height: 80rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
		}
	}
</style>
